<template>
  <div class="w-530px mt--10px">
    <div
      class="flex flex-justify-between flex-items-center border line-height-36px"
    >
      <p class="text-#bb0615 text-16px font-600">- IP知识库 -</p>
      <p
        class="text-#bababa text-14px hover-text-#bb0615 cursor-pointer"
        @click="go_news"
      >
        更多＞＞
      </p>
    </div>
    <div>
      <div
        v-for="item in list"
        :key="item.id"
        class="flex flex-justify-between flex-items-center border line-height-42px cursor-pointer"
        @click="go_web(item.url)"
      >
        <p class="text-14px text-#242424 text-ellipsis hover-text-#bb0615">
          {{item.title}}
        </p>
        <p class="text-#b5b5b5">{{item.ctime}}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from "vue-router";
import { news_list } from "@/api/index";

const list = ref([])
const $router = useRouter();
const go_news = () => {
  $router.push("/news");
};
const go_web = (src) => {
  if (src.startsWith("http")) {
    window.open(src, "_blank");
  } else {
    $router.push(src);
  }
};
const get_news_list = async () => {
  const params = {
    page: 1,
    page_size: 6,
  };
  const { data: { data } } = await news_list(params);
  list.value = data
};
get_news_list()
</script>

<style scoped>
.border {
  border-bottom: 1px solid #bababa;
}
.text-ellipsis {
  width: 420px; /* 设置元素宽度 */
  white-space: nowrap; /* 保持文本在一行内 */
  overflow: hidden; /* 隐藏溢出部分内容 */
  text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
}
</style>
